<template>
  <div class="goodsList">
    <van-tree-select height="auto" :items="items" :main-active-index.sync="active" @click-nav="clickNav(items[active].text)">
      <template #content>
        <div class="goods-list">
          <div class="goods-item" v-for="(goods,index) in goodsList" :key="index" @click="goDetail(goods.id)">
            <div class="imgbox">
              <img v-lazy="goods.pictUrl" alt="">
            </div>
            <p class="g-title">{{goods.title}}</p>
            <p class="g-price">{{goods.Price}}</p>
            <p class="g-store">{{goods.shopTitle}}</p>
          </div>
          <p class="no-more">没有更多了哦~ 去其它分类看看吧</p>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>
<script>
import { getGoodsList } from '@/api/goods.js'
export default {
  data() {
    return {
      active: 0,
      items: [{ text: '新品上线' }, { text: '火热上线' }, { text: '手机数码' }, { text: '家用电器' }, { text: '美妆护肤' }, { text: '小米优选' }, { text: '智能手表' }, { text: '蓝牙耳机' }, { text: '水果生鲜' }],
      goodsList: []
    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    async getCateList(cate = '新品上线') {
      const res = await getGoodsList(cate)
      this.goodsList = res.data.data
      this.$store.commit('goods/SET_GOODS_LIST', this.goodsList)
    },
    clickNav(cate) {
      this.getCateList(cate)
    },
    goDetail(id) {
      this.$router.push('/home/goodsInfo/' + id)
    }
  }
}
</script>
<style lang="scss">
.goodsList {
  .van-tree-select {
    .van-sidebar {
      text-align: center;
    }
  }
  .van-tree-select__content {
    .goods-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      text-align: center;
      .goods-item {
        width: 100px;
        margin: 5px;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 4px;
        .imgbox {
          width: 100%;
          img {
            width: 100%;
          }
        }
        .g-title,
        .g-store {
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 12px;
          // display: -webkit-box;
          // -webkit-line-clamp: 1;
        }
        .g-price {
          width: 100%;
          color: #ff2900;
          font-weight: 600;
        }
        .g-store {
          color: #999;
        }
      }
      .no-more {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>